<template>
  <div class="current-lottery-phone border-bottom">
    <div class="current-lottery">
      <div class="top">
        <slot name="top">
          <div class="date-no">
            <span>819048</span>
            <span>期</span>
          </div>
          <div class="number-bar">
            <span>13,12,大</span>
          </div>
        </slot>
      </div>
      <div class="bottom">
        <slot name="bottom">1234567</slot>
      </div>
    </div>
    <div class="draw-time border-left">
      <div class="top">
        <slot name="right-top">
          距<span>{{winningNumbers.dateNo}}</span>期开奖
        </slot>
      </div>
      <div class="count-down time">
        <slot name="right-bottom">9887</slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    winningNumbers: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      closeTime: '00:00:00',
      drawTime: '00:00:00',
    }
  },
  created() {
    this.countDownCloseTime()
    this.countDownDrawTime()
  },
  methods: {
    countDownCloseTime() {
      this.closeTime = this.timeFormater(this.winningNumbers.closeTime)
      if (this.closeTime == '00:00:00') {
        return
      }
      setTimeout(() => {
        this.countDownCloseTime()
      }, 500)
    },
    countDownDrawTime() {
      this.drawTime = this.timeFormater(this.winningNumbers.drawTime)
      if (this.drawTime == '00：00：00') return
      setTimeout(() => {
        this.countDownDrawTime()
      }, 500)
    },
    timeFormater(deadLine) {
      let current = new Date().getTime()
      let timeDiff = (Number(deadLine) - Number(current)) / 1000
      if (timeDiff <= 0) {
        return '00:00:00'
      }
      let hours = parseInt(timeDiff / 3600 % 24)
        hours =  hours < 10 ? '0' + hours : hours
      let minute = parseInt(timeDiff / 60 % 60)
        minute =  minute < 10 ? '0' + minute : minute
      let second = parseInt(timeDiff  % 60 ) 
        second =  second < 10 ? '0' + second : second
      let time = `${hours}:${minute}:${second}`
      return time
    }
  },
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .current-lottery-phone 
    display flex
    width 100%
    height 64px
    justify-content space-between
    align-items center
    box-sizing border-box 
    background #fcfbf9
    // padding-right 10px
    .current-lottery 
      display flex
      flex 1
      flex-direction column 
      height 48px
      justify-content space-between
      .top 
        display flex
        align-items center
        box-sizing border-box 
        padding-left 8px
        .number-bar
          display flex 
          align-items center 
          height 20px 
          margin-left 10px
          border-radius 10px
          box-sizing border-box 
          padding 0 5px
          border 1px solid $color-nav-border
          background $color-nav-bg
          color $color-text-yellow
      .bottom 
        padding-left 8px
        display flex
    .draw-time 
      width 114px 
      text-align center
      height 48px
      box-sizing border-box 
      padding 0 6px
      display flex 
      justify-content space-around
      flex-direction column
      .top 
        font-size 13px 
      .count-down 
        font-size 24px  
        color $color-theme-red
</style>
